import 'package:flutter/material.dart';

import 'models/product.dart';

///  产品详情页面

class productDetailPage extends StatefulWidget {
  Product product;

  productDetailPage({Key? key, required this.product}) : super(key: key);

  @override
  _productDetailPageState createState() => _productDetailPageState(product);
}

class _productDetailPageState extends State<productDetailPage> {
  Product product;

  _productDetailPageState(this.product) : super();

  double width = 250.0;
  double height = 250.0;

  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GestureDetector(
            onTap: () => {Navigator.of(context)..pop()},
            child: Container(
                width: double.infinity,
                height: double.infinity,
                color: Colors.white,
                padding: EdgeInsets.all(15.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Align(
                      alignment: Alignment.topRight,
                      child: Image(
                        image: AssetImage(product.styles[selected].image),
                        height: height,
                        width: width,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          product.name,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black87,
                            fontSize: 18,
                          ),
                          textAlign: TextAlign.left,
                        ),
                        SizedBox(
                          height: 8,
                        ),
                        Text(product.category,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black54,
                                fontSize: 22),
                            textAlign: TextAlign.left),
                      ],
                    )),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                      height: 100,
                      child: ListView.builder(
                        itemBuilder: (builder, index) {
                          return colorWidget(product.styles[index]);
                        },
                        // 子元素数目
                        itemCount: product.styles.length,
                        // 滚动方向   水平
                        scrollDirection: Axis.horizontal,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          product.title,
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.black87,
                              fontSize: 15),
                          textAlign: TextAlign.left,
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Text(product.description,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black54,
                                fontSize: 15),
                            textAlign: TextAlign.left),
                      ],
                    ))
                  ],
                ))));
  }

  Widget colorWidget(ProductStyle productStyle) {
    return Container(
        padding: EdgeInsets.all(10),
        child: GestureDetector(
          onTap: () => {
            setState(() => {
                  selected = product.styles
                      .indexWhere((element) => productStyle == element)
                })
          },
          child: ClipOval(
            child: Container(
              width: 80,
              height: 80,
              color: productStyle.color,
            ),
          ),
        ));
  }
}
